<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="x-UA-Compatible" content="ie=Edge">
   	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Crafty - 精灵</title>
	<link rel="shortcut icon" href="../favicon.ico">
	<link type="text/css" rel="stylesheet" href="../craftyjs-site.css" />
</head>
<body>
	<div id = "header-background"> </div>
	<div id = "page-frame">
	<div id="header">
		<nav class="navbar">
  			<div class="container-fluid">
  				<div class="navbar-header">
  					<a class="navbar-brand" href="../"> <img class="logo" src="../images/text-logo.png" /> </a>
  					
				</div>
				<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
						<li><a href="../">首页</a></li>
						<li><a href="../getting-started/">快速开始</a></li>
						<li><a href="../documentation/">文档</a></li>
						<li><a href="../api/">API</a></li>
						<li><a href="../components/">组件</a></li>
						<li class="emph"><a href="../#install">下载</a></li>
					</ul>
				</div>
			</div>
		</nav>
	</div>


	<div id="main">
		<div id="content" class="container">
			
<div id="docs">
	<div id='doc-nav'>
		<ul id='doc-level-one'>
			<li>
				Topics
				<ul>
					<li>
						<a href='../documentation/'>
							文档
						</a>
					</li>
					<li>
						<a href='../documentation/entities.html'>
							实体
						</a>
					</li>
					<li>
						<a href='../documentation/events.html'>
							事件
						</a>
					</li>
					<li>
						<a href='../documentation/components.html'>
							组件
						</a>
					</li>
					<li>
						<a href='../documentation/2d.html'>
							2D绘图
						</a>
					</li>
					<li>
						<a href='../documentation/text.html'>
							文本
						</a>
					</li>
					<li>
						<a href='../documentation/keyboard.html'>
							键盘
						</a>
					</li>
					<li>
						<a href='../documentation/mouse.html'>
							鼠标
						</a>
					</li>
					<li>
						<a href='../documentation/sound.html'>
							声音
						</a>
					</li>
					<li>
						<a href='../documentation/sprites.html'>
							精灵
						</a>
					</li>
					<li>
						<a href='../documentation/scenes.html'>
							场景
						</a>
					</li>
					<li>
						<a href='../documentation/gameloop.html'>
							游戏循环
						</a>
					</li>
				</ul>
			</li>
		</ul>
	</div>
	<div id='doc-content' class="markdown">
		

		<h2> Sprites </h2>
<p>Sprite sheets are image files which contain multiple game images.</p>
<p>This example uses a public domain file from the <a href="http://opengameart.org/content/glitch-sprite-assets-huge-collection">Glitch assets collection</a>.  Thanks to Tiny Speck for opening their assets up! Here&#39;s the image we&#39;ll be referring to:</p>
<p><img src="../images/glitch_walker.png" height=114 width=416 /></p>
<p>In this case, it depicts multiple frames of a single animation, but it&#39;s common for sprite sheets to combine many different animations.</p>
<h2 id="loading-sprite-sheets">Loading sprite sheets</h2>
<p>To prepare the sheets for use, you need to not only load them, but specify the locations of individual sprites within them.  This can be done in one step with <a href="../api/Crafty-loader.html"><code>Crafty.load</code></a>.</p>
<pre><code><span class="hljs-keyword">var</span> assetsObj = {
    <span class="hljs-string">"sprites"</span>: {
        <span class="hljs-comment">// This spritesheet has 16 images, in a 2 by 8 grid</span>
        <span class="hljs-comment">// The dimensions are 832x228</span>
        <span class="hljs-string">"glitch_walker.png"</span>: {
            <span class="hljs-comment">// This is the width of each image in pixels</span>
            tile: <span class="hljs-number">104</span>,
            <span class="hljs-comment">// The height of each image</span>
            tileh: <span class="hljs-number">114</span>,
            <span class="hljs-comment">// We give names to three individual images</span>
            map: {
                <span class="hljs-attr">walker_start</span>: [<span class="hljs-number">0</span>, <span class="hljs-number">0</span>]
                walker_middle: [<span class="hljs-number">7</span>, <span class="hljs-number">0</span>]
                walker_end: [<span class="hljs-number">7</span>, <span class="hljs-number">1</span>]
            }
        }
    }
};

Crafty.load(assetsObj, callback)</code></pre>
<p>Some sheets will have padding around each image, or around the sheet as a whole.  You can specify this with <code>paddingX</code>, <code>paddingY</code>, and <code>paddingAroundBorder</code> fields.</p>
<h2 id="static-sprites">Static sprites</h2>
<p>To use a static sprite, we refer to the map we defined earlier.  Crafty will have auto-generated components with those names, adding the <a href="../api/Sprite.html">&quot;Sprite&quot;</a> component behind the scenes.</p>
<pre><code><span class="hljs-comment">// This will display the image associated with walker_start</span>
<span class="hljs-comment">// It automatically gets the dimensions of that image: 104x114</span>
<span class="hljs-keyword">var</span> actual_size = Crafty.e(<span class="hljs-string">"2D, Canvas, walker_start"</span>)
    .attr({<span class="hljs-attr">x</span>: <span class="hljs-number">10</span>, <span class="hljs-attr">y</span>:<span class="hljs-number">10</span>});

<span class="hljs-comment">// An image from a different part of the sprite sheet</span>
<span class="hljs-comment">// Here we scale it to half size</span>
<span class="hljs-keyword">var</span> small_sprite = Crafty.e(<span class="hljs-string">"2D, Canvas, walker_middle"</span>)
    .attr({<span class="hljs-attr">x</span>:<span class="hljs-number">150</span>, <span class="hljs-attr">y</span>:<span class="hljs-number">10</span>, <span class="hljs-attr">w</span>:<span class="hljs-number">52</span>, <span class="hljs-attr">h</span>:<span class="hljs-number">57</span>})</code></pre>
<h2 id="animating-sprites">Animating sprites</h2>
<p>You can animate one of the sprites above by adding the <a href="../api/SpriteAnimation.html">&quot;SpriteAnimation&quot;</a> component.</p>
<pre><code><span class="hljs-keyword">var</span> walker = Crafty.e(<span class="hljs-string">'2D, Canvas, walker_start, SpriteAnimation'</span>);</code></pre>
<p>Animation is handled by defining and playing &quot;reels&quot;.  To define a reel, call the <code>reel</code> method with a name, a duration in ms, and a list of frames.  Here we define a reel called &quot;walking&quot; which will last for 1 s, and explicitly list the 16 frames in the order we want them to play:</p>
<pre><code>walker.reel(<span class="hljs-string">"walking"</span>, <span class="hljs-number">1000</span>, [
    [<span class="hljs-number">0</span>, <span class="hljs-number">0</span>], [<span class="hljs-number">1</span>, <span class="hljs-number">0</span>], [<span class="hljs-number">2</span>, <span class="hljs-number">0</span>], [<span class="hljs-number">3</span>, <span class="hljs-number">0</span>], [<span class="hljs-number">4</span>, <span class="hljs-number">0</span>], [<span class="hljs-number">5</span>, <span class="hljs-number">0</span>], [<span class="hljs-number">6</span>, <span class="hljs-number">0</span>], [<span class="hljs-number">7</span>, <span class="hljs-number">0</span>],
    [<span class="hljs-number">0</span>, <span class="hljs-number">1</span>], [<span class="hljs-number">1</span>, <span class="hljs-number">1</span>], [<span class="hljs-number">2</span>, <span class="hljs-number">1</span>], [<span class="hljs-number">3</span>, <span class="hljs-number">1</span>], [<span class="hljs-number">4</span>, <span class="hljs-number">1</span>], [<span class="hljs-number">5</span>, <span class="hljs-number">1</span>], [<span class="hljs-number">6</span>, <span class="hljs-number">1</span>], [<span class="hljs-number">7</span>, <span class="hljs-number">1</span>]
])</code></pre>
<p>Then, to play the animation, you simply call the <code>animate</code> method to start it!  This method takes two parameters: the name of the reel, and the number of times to play it.  To loop indefinitely, pass a value of <code>-1</code>:</p>
<pre><code>walker.animate(<span class="hljs-string">"walking"</span>, <span class="hljs-number">-1</span>)</code></pre>
<p>Finally, here&#39;s a complete example running on jsbin, showing our sprite walking in place:
<a class="jsbin-embed" href="http://jsbin.com/reneji/1/embed?js,output">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script></p>
<p>Try adding <code>walker.animationSpeed = 2</code> at the end of the <code>go()</code> function!</p>
	</div>
</div>
			
		</div>
	</div>
	<div class="clearer"></div>
	<div id="footer">
		<div id="contact">
			<a href="https://groups.google.com/forum/#!forum/craftyjs">
				<img src="../images/google.png" />
				google groups</a>
			<a href="mailto:starwed@gmail.com">
				<img src="../images/email.png" />
				starwed@gmail.com</a>
			<a href="https://github.com/craftyjs/Crafty">
				<img src="../images/github.png" />
				github</a>
		</div>
		<ul>
			<li><a href="../">首页</a></li>
				<li><a href="../getting-started/">快速开始</a></li>
				<li><a href="../documentation/">文档</a></li>
				<li><a href="../api/">API</a></li>
				<li><a href="../components/">组件</a></li>
				<li class="emph"><a href="../#install">下载</a></li>
		</ul>
		<p>
			&copy; Crafty 2010-2015. Crafty is distributed under the <a href="http://en.wikipedia.org/wiki/MIT_License">MIT License</a>.
		</p>
	</div>
</div>
</body>
</html>
